<template>
	<view class="index-page" :style="{paddingTop: statusBarHeight + 'px'}">
		<image src="../../static/images/indexbg.png" mode="widthFix" class="bg"></image>
		<view class="index-navbar">云帮帮</view>
		<view class="index-search-bar flex-center">
			<view class="flex_bd">
				<view class="search-box">
					<image src="../../static/images/search.png" mode="" class="search-icon"></image>
					<view class="flex_bd">
						<input type="text" value="" placeholder="请输入产品名称/型号" />
					</view>
				</view>
			</view>
			<view class="message-icon" @click="openUrl('/pages/index/message')">
				<image src="../../static/images/bell.png" mode=""></image>
				<view class="badge"></view>
			</view>
		</view>
		<view class="index-banner">
			<u-swiper :list="list" indicator-pos="bottomLeft" height="280"></u-swiper>
		</view>
		<view class="notice-bar flex-center">
			<image src="../../static/images/redpocket.png" class="notice-icon" mode=""></image>
			<view class="flex_bd">
				<swiper class="swiper-notice" :indicator-dots="false" autoplay :vertical="true">
					<swiper-item>
						<view class="notice-item">恭喜张某某推荐成功获得佣金5000元</view>
					</swiper-item>
					<swiper-item>
						<view class="notice-item">恭喜张某某推荐成功获得佣金5000元</view>
					</swiper-item>
					<swiper-item>
						<view class="notice-item">恭喜张某某推荐成功获得佣金5000元</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="index-menu flex-center">
			<view class="menu-box">
				<image src="../../static/images/menu1.jpg" mode=""></image>
				<view class="text">产品推荐</view>
			</view>
			<view class="menu-box" @click="openUrl('/pages/index/rankList')">
				<image src="../../static/images/menu2.jpg" mode=""></image>
				<view class="text">排行榜</view>
			</view>
			<view class="menu-box" @click="openUrl('/pages/index/money')">
				<image src="../../static/images/menu3.jpg" mode=""></image>
				<view class="text">赚钱攻略</view>
			</view>
			<view class="menu-box">
				<image src="../../static/images/menu4.jpg" mode=""></image>
				<view class="text">积分商城</view>
			</view>
		</view>
		<view class="index-main">
			<view class="list-heading flex-center justify-zBetween">
				<view class="tt">热销分类</view>
				<navigator class="more" url="/pages/product/product"><text>更多</text> <image src="../../static/images/arrow.png" mode=""></image></navigator>
			</view>
			<view class="index-tab">
				<u-tabs font-size="28" bar-height="0" :bar-style="barStyle" :active-item-style="itemStyle" :list="tablist" :current="current" @change="change"></u-tabs>
			</view>
			<view class="list-main">
				<view class="product-list" v-for="(item,index) in 4">
					<view class="product-cell flex-center">
						<view class="photo">
							<image src="../../static/images/indexpic.jpg" mode=""></image>
						</view>
						<view class="flex_bd">
							<view class="title">
								<view class="flex_bd ellipsis">ZE60E-10 履带式液压挖掘机履带式液压挖掘机</view>
								<image v-if="index == 0" src="../../static/images/hot.png" class="hot-icon" mode=""></image>
							</view>
							<view class="item">操作质量：6050kg</view>
							<view class="item">标准斗容：0.23m²</view>
							<view class="item">预计佣金：<text>5000元/台</text></view>
						</view>
					</view>
					<view class="product-foot">
						<view class="bar-left">
							<image src="../../static/images/audio.png" mode=""></image><text>6543人分享，543人推荐</text>
						</view>
						<view class="bar-right">
							<view class="bar-link">分享</view>
							<view class="bar-link">推荐</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar inactive-color="#C8C8CC" active-color="#9DC851" v-model="footcurrent" :list="tabbarlist" :mid-button="true" @change="barchange"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tablist: [{
					name: '全部'
				}, {
					name: '挖机'
				}, {
					name: '混凝土泵车',
				}, {
					name: '搅拌车',
				}, {
					name: '塔式起重机',
				}],
				current: 0,
				list: [{
					image: 'http://zrf.wanjunshijie.com/hetun//banner.jpg',
				}, {
					image: 'http://zrf.wanjunshijie.com/hetun//banner.jpg',
				}, {
					image: 'http://zrf.wanjunshijie.com/hetun//banner.jpg',
				}, ],
				itemStyle:{
					borderRadius:'4px',
					color:'#fff',
					background: '#a2c833'
				},
				// tab
				tabbarlist: '',
				footcurrent: 0,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			}
		},
		onLoad() {
			this.tabbarlist = [{
					iconPath: "/static/images/foot1.png",
					selectedIconPath: "/static/images/foot1_on.png",
					text: '首页',
					isDot: false,
					customIcon: false,
					pagePath: "/pages/index/index"
				},
				{
					iconPath: "/static/images/foot2.png",
					selectedIconPath: "/static/images/foot2_on.png",
					text: '产品',
					customIcon: false,
					pagePath: "/pages/product/product"
				},
				{
					iconPath: "/static/images/middle.png",
					selectedIconPath: "/static/images/middle.png",
					midButton: true,
					customIcon: false,
					pagePath: "/pages/clue/newClue"
				},
				{
					iconPath: "/static/images/foot3.png",
					selectedIconPath: "/static/images/foot3_on.png",
					text: '线索',
					customIcon: false,
					pagePath: "/pages/clue/clue"
				},
				{
					iconPath: "/static/images/foot4.png",
					selectedIconPath: "/static/images/foot4_on.png",
					text: '我的',
					isDot: false,
					customIcon: false,
					pagePath: "/pages/ucenter/ucenter"
				},
			]
		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			change(index) {
				this.current = index;
			},
			barchange(e){
				if(e == 2){
					uni.navigateTo({
						url: '/pages/clue/newClue'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.list-heading{
		margin-bottom: 30rpx;
		.tt{
			font-size: 32rpx;
			font-weight: bold;
		}
		.more{
			color: #999;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.index-search-bar{
		position: relative;
		z-index: 9;
		margin-bottom: 24rpx;
		.message-icon{
			position: relative;
			font-size: 0;
			margin-left: 20rpx;
			image{
				width: 64rpx;
				height: 64rpx;
			}
			.badge{
				position: absolute;
				left: 50%;
				top: 10rpx;
				margin-left: 18rpx;
				width: 16rpx;
				height: 16rpx;
				border-radius: 15px;
				background: #FD523B;
				border: 1px solid #FFFFFF;
			}
		}
	}
	.search-box{
		height: 72rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border-radius: 40rpx;
		background-color: #FFFFFF;
		.search-icon{
			margin-right: 10rpx;
			width: 40rpx;
			height: 40rpx;
			display: block;
		}
	}
	
	.index-page {
		position: relative;
		padding: 26rpx 30rpx;
		.bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}
	}
	.index-page{
		padding-top:36rpx;
	}
	.index-tab{
		margin-right: -30rpx;
	}
	.index-main /deep/ .u-tab-item{
		border-radius: 4px;
		margin-right: 10px;
		background-color: #f7f7f7;
	}
	.product-list {
		padding: 30rpx 0;
		border-bottom: 1px solid #eeeeee;
	}

	.product-cell {
		.photo {
			background: #E5E5E5;
			border-radius: 12px;
			font-size: 0;
			margin-right: 30rpx;

			image {
				width: 200rpx;
				height: 176rpx;
			}
		}

		.title {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.item {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #303337;
			line-height: 42rpx;

			text {
				color: #FE6714;
				font-weight: bold;
			}
		}
	}

	.product-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;

		.bar-left {
			display: flex;
			align-items: center;
			padding: 0 8rpx;
			height: 52rpx;
			font-size: 24rpx;
			color: #606366;
			background: linear-gradient(270deg, rgba(157, 200, 81, 0) 0%, rgba(157, 200, 81, 0.3) 100%);

			image {
				margin-right: 8rpx;
				width: 32rpx;
				height: 38rpx;
			}
		}

		.bar-right {
			width: 306rpx;
			height: 52rpx;
			line-height: 52rpx;
			background: #9DC851;
			font-size: 26rpx;
			color: #FFFFFF;
			overflow: hidden;
			text-align: center;

			.bar-link {
				position: relative;
				height: 52rpx;
				line-height: 52rpx;
				width: 50%;
				float: left;

				&:first-child {
					background-color: #303337;
				}

				&:first-child::after {
					content: '';
					position: absolute;
					right: -10px;
					top: 0;
					bottom: 0;
					width: 0;
					height: 0;
					border-bottom: 52rpx solid #303337;
					border-right: 10px solid transparent;
				}
			}
		}
	}
	
	.index-banner {
		margin-bottom: 24rpx;
	}

	.index-menu {
		margin-bottom: 52rpx;
		.menu-box {
			text-align: center;
			flex: 1;
			line-height: 1;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #303337;
			}
		}
	}
	.swiper-notice{
		height: 80rpx;
		.notice-item{
			line-height: 80rpx;
		}
	}
	.notice-bar {
		margin-bottom: 52rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		font-size: 28rpx;
		height: 80rpx;
		font-weight: 400;
		color: #957239;

		image {
			margin-right: 10rpx;
			width: 120rpx;
			height: 80rpx;
		}
	}
	.index-navbar{
		position: relative;
		z-index: 9;
		text-align: center;
		height: 84rpx;
		line-height: 84rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #383842;
		margin-bottom: 14rpx;
		// margin-top: var(--status-bar-height);
	}
	/deep/ .u-tabbar__content__circle__button{
		width: 136rpx!important;
		height: 136rpx!important;
	}
	/deep/ .u-tabbar__content__circle__button image{
		width: 136rpx!important;
		height: 136rpx!important;
	}
	/deep/ .u-tabbar__content__circle__border{
		display: none!important;
	}
	
</style>
